<template>
	<view class="wallet">
		<base-navbar back-color="#fff" title="我的佣金"></base-navbar>
		<view class="content">
			<view class="header">
				<view class="header-info">
					<view class="header-left"></view>
					<view class="year">
						<uni-icons type="calendar" size="24"></uni-icons>
						<picker mode="date" @change="dateChange" start="2024-08-01" end="2035-12-31">{{ currentDate }}
						</picker>
					</view>
					<view class="header-right"
						@click="pageRoute('/pages/users/withdraw/withdraw?user_type=2&record_type=3')">提现</view>
				</view>
				<view class="total">
					{{ info.income || 0 }}
				</view>
				<view class="" style="text-align: center;">
					今日收益（元）
				</view>
				<view class="grid">
					<view class="grid-item">
						<text class="label">可提现（元）</text>
						<text class="value">{{ info.withdrawal || 0 }}</text>
					</view>
					<view class="grid-item">
						<text class="label">累计提现（元）</text>
						<text class="value">{{ info.use_withdrawal || 0 }}</text>
					</view>
				</view>
			</view>

			<uni-segmented-control :style="'width:' + windowWidth + 'px'" :current="currentTab" :values="tabItems"
				:style-type="styleType" :active-color="themeColor.theme" @clickItem="tabChange" />

			<view class="content-list" v-if="records.length>0">
				<income-records v-for="(item, index) in records" :item="item" :key="index"></income-records>
			</view>
			<view v-else>
				<c-empty title="暂无数据"></c-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		onMounted,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		tabItems: ['收益明细', '支出明细', '提现明细'],
		styleType: 'text',
		windowWidth: '390',
		currentTab: 0,
		info: {
			income: 0,
			withdrawal: 0,
			use_withdrawal: 0,
		},
		records: [],
		currentDate: new Date().toISOString().slice(0, 10), // 设置当前日期
		isMore: false,
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('currentTab')) {
			state.currentTab = opt.currentTab;
		}
		getRecords();
	});

	onShow(() => {});

	onMounted(() => {
		// 获取当前系统的信息
		const sysInfo = uni.getSystemInfoSync();
		console.log("获取当前系统的信息", sysInfo);
		// 为 wh 窗口可用宽度动态赋值
		state.windowWidth = sysInfo.windowWidth;
		console.log("窗口可用宽度", state.windowWidth);
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新");
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", state.isMore);
		if (state.isMore) {
			getRecords();
		}
	});

	function getRecords() {
		request.get('member/getMemberCommissionIncome', {
			date: state.currentDate,
			type: state.currentTab,
			skip: state.records.length,
			limit: 10,
		}).then(res => {
			console.log('佣金收益', res);
			state.isMore = res.data.is_more;
			state.info = res.data.info;
			state.currentDate = res.data.currentDate;
			if (state.records.length == 0) {
				state.records = res.data.records;
			} else {
				state.records = state.records.concat(res.data.records);
			}
		})
	}

	// 修改选择的日期
	function dateChange(e) {
		console.log(e);
		state.currentDate = e.detail.value;
		state.records = [];
		getRecords();
	}

	// 选项卡改变
	function tabChange(e) {
		console.log(e);
		state.currentTab = e.currentIndex;
		console.log("当前选中", state.currentTab);
		state.records = [];
		getRecords();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}
	const {
		themeColor,
		tabItems,
		styleType,
		windowWidth,
		currentTab,
		info,
		records,
		currentDate,
		isMore,
	} = toRefs(state);
</script>

<style lang="scss">
	.wallet {
		.site-nav-btn {
			height: 88rpx;
			padding: 1em;
			@include f-center;

			text {
				color: $u-reverse-color;
			}
		}

		.content {
			// margin-top: -160rpx;
			padding: $m24;

			.header {
				overflow: hidden;
				margin-bottom: $m24;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-12;

				.header-info {
					display: flex;

					.header-left {
						width: 110rpx;
					}

					.year {
						@include f-center;
						padding: .8em .6em 0;
						background-color: $u-bg-reverse-color;
						font-size: $font-36;
						color: $u-main-color;
						line-height: 1;
						border-radius: $radius-8;
						flex: 1;
					}

					.header-right {
						width: 100rpx;
						margin-top: 15px;
					}
				}

				.total {
					@include f-center;
					padding-top: $m24;
					font-size: $font-48;
					font-weight: bold;
					color: $u-type-error;

					text {
						position: relative;
						top: -12rpx;
						align-self: flex-end;
						font-weight: normal;
						font-size: $font-20;
						color: $u-type-error;
					}
				}

				.grid {
					display: flex;
					flex-wrap: wrap;
					padding: $margin-12 0;

					.grid-item {
						@include f-center($direction: column);
						flex: 0 0 50%;

						.value {
							font-size: $font-36;
						}
					}
				}
			}

			.content-list {
				background-color: $bg-inverse-color;
				padding: 0 $margin-24;
			}
		}
	}
</style>